<template>
  <div class="home-container">
  	<div class="wrap" ref="editor">
      <header>
       
        
        <h2>大屏</h2>
        <div class="features">
          
        </div>
      </header>
       
      <!-- <deviceHealth  style="left: 50px;top:110px;width: 360px;height: 300px;"/>
      <deviceApHealth  style="left: 350px;top:110px;width: 360px;height: 300px;"/>
      <radioHealth  style="left: 650px;top:110px;width: 360px;height: 300px;"/>
      <siteHealth  style="left: 950px;top:110px;width: 360px;height: 300px;"/> -->

      <!-- <deviceStatus style="left: 50px;top:110px;width: 400px;height: 300px;"/> -->
      
<!-- <div id="iframe-container">
      <iframe src="https://www.baidu.com/?tn=88093251_95_hao_pg" ></iframe>
  </div> -->

    </div>
  </div>
</template>

<script>
import { screenSize } from '@/assets/js/utils'

export default {
  name: 'Home',
  components: {},
  data() {
  	return {
      moduleObj: {},
      nowTime: '',
      week: '',
      date: ''
  	}
  },
  computed: {
  	
  },
  created() {
  
  },
  mounted() {
    this.nowTimes();
    screenSize(this.$refs.editor);
  },
  methods: {
    timeFormate(timeStamp) { //显示当前时间
      let newDate = new Date(timeStamp);
      let year = newDate.getFullYear();
      let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
      let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
      let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();
      let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();
      let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();
      let week = newDate.getDay();
      let weeks = ['日', '一', '二', '三', '四', '五', '六'];
      let getWeek = '星期' + weeks[week];
      this.week = getWeek;
      this.date = year + '.' + month + '.' + date;
      this.nowTime = hh + ':' + mm + ':' + ss;
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear();
    },
    clear() {
      clearInterval(this.nowTimes)
      this.nowTimes = null;
    },
   
    
  }
}
</script>

<style lang="less" scoped>
.home-container {
	position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #001254;
}	
header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 80px;
  background-color: transparent;
  background: url('https://cloudcampusapps.top/large_screen/img/top_nav.png') no-repeat top center;
  background-position: 65% 0;
  border: none;
  overflow: hidden;
  h2 {
    color: #7ef0ff;
    font-size: 30px;
    text-align: center;
    line-height: 68px;
    letter-spacing: 6px;
  }
  .showTime {
    position: absolute;
    left: 50px;
    top: 20px;
    color: rgba(126, 240, 255, .7);
    display: flex;
    .time {
      font-size: 28px;
      margin-left: 20px;
      line-height: 2;
    }
    .date {
      span {
        display: block;
        &:nth-child(1) {
          font-size: 16px;
          text-align: left;
          line-height: 2;
        }
        &:nth-child(2) {
          font-size: 16px;
          line-height: 2;
        }
      }
    }
  }
  .features {
    position: absolute;
    right: 50px;
    top: 40px;
    color: rgba(126, 240, 255, .7);
    display: flex;
    font-size: 40px;
    i {
      margin-left: 20px;
    }
  }
}
</style>
